import React, {PropsWithChildren} from "react"
import {createUseStyles} from "react-jss";
import {Space} from "antd";

let useStyles = createUseStyles({
    header:{
    },
    spacer:{
    },
    container: {
        display: "flex",
        flexDirection: "column",
        "& $header":{
            display: "flex",
            flexDirection:"row",
            marginBottom:16,
            "& $spacer":{
                flexGrow:1
            }
        }
    },
});

export interface DataPageLayoutProps {
    leftActions?: React.ReactNode
    rightActions?: React.ReactNode
}

const DataPageLayout: React.FC<PropsWithChildren<DataPageLayoutProps>> = ({leftActions, rightActions,children}) => {
    const jsStyles = useStyles()
    return <>
        <div className={`${jsStyles.container}`}>
            {(leftActions||rightActions)?<div className={jsStyles.header}>
                <Space>
                    {leftActions}
                </Space>
                <div className={jsStyles.spacer}/>
                <Space>
                    {rightActions}
                </Space>
            </div>:undefined}
            {children}
        </div>
    </>
}

export default DataPageLayout